import React, { useState, useEffect } from "react";
import { useLocation, useParams, useNavigate } from "react-router-dom";
import { Select, Button, Table } from "antd";
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
import DictStyle from "./dict.module.scss";
import { talkColumn } from "./column";
import { queryTalkById, queryGroupList } from "@/api/quzi.js";
export default function QuziComment() {
  const params = useParams();
  console.log(params, "params");
  const nav = useNavigate();
  const location = useLocation();
  const [paginationObj, setPaginationObj] = useState({ page: 1, size: 10 });
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState([]);
  const [dictInfoList, setInfoList] = useState([]);
  const [groupId, setgroupId] = useState();
  useEffect(() => {
    getList();
    getDictInfoList();
  }, []);
  console.log("data", location);

  //获取select枚举
  const getDictInfoList = async () => {
    const res = await queryGroupList();
    console.log("dictenum", res);
    setInfoList([...res.data, { groupName: "其他", groupType: -1 }]);
  };

  // 请求dict数据
  const getList = async (requestId = null) => {
    let id = useQuery().get("groupId");
    let requestObj = {};
    if (requestId) {
      requestObj.groupId = requestId;
    } else {
      requestObj.groupId = id;
    }
    const res = await queryTalkById(requestObj);
    console.log("res", res);
    setList(res.data);
  };

  function useQuery() {
    return new URLSearchParams(location.search);
  }

  const handlePageChange = (page, size) => {
    // getList({ page, size });
  };

  const handleSizeChange = (page, size) => {
    // getList({ page, size });
  };

  // select的value变化
  const handleChangeSearch = (value) => {
    setgroupId(value);
  };

  // 返回
  const handleBack = () => {
    nav(location.state.originPath);
  };
  //重置
  const handleResetSearch = () => {
    setgroupId(null);
  };
  // 查询
  const handleSearch = () => {
    console.log(groupId, "groupId");
    getList(groupId);
  };

  const handleGroupName = (groupType) => {
    let item = dictInfoList.find((item) => item.groupType === groupType);
    return item ? item.groupName : "--";
  };

  const columns = talkColumn({ handleGroupName });
  return (
    <div className={DictStyle.dict}>
      <div className={DictStyle.top}>
        <div className={DictStyle.search}>
          <h3>圈子选择:</h3>
          <Select
            value={groupId}
            style={{ width: "200px", marginRight: "10px" }}
            options={dictInfoList}
            fieldNames={{ label: "groupName", value: "groupType" }}
            onChange={handleChangeSearch}
          ></Select>
          <Button
            icon={<SearchOutlined />}
            type="primary"
            className={DictStyle["ant-btn"]}
            onClick={handleSearch}
          >
            查找
          </Button>
          <Button
            icon={<RedoOutlined />}
            className={DictStyle["ant-btn"]}
            onClick={handleResetSearch}
          >
            重置
          </Button>
        </div>
        <Button
          style={{ background: "#e6a23c", color: "#fff", border: "none" }}
          onClick={handleBack}
        >
          返回
        </Button>
      </div>
      <div className={DictStyle["table-container"]}>
        <Table
          columns={columns}
          dataSource={list}
          rowKey={(record) => record.id}
          loading={loading}
          pagination={{
            pageSize: paginationObj.pageSize,
            current: paginationObj.currentPage,
            pageSizeOptions: [3, 5, 10, 20],
            showSizeChanger: true,
            total: paginationObj.total,
            showTotal: (total) => `共${total}条`,
            onChange: handlePageChange,
            onShowSizeChange: handleSizeChange,
          }}
        />
      </div>
    </div>
  );
}
